<template >
  <div style>
    <div class="nolist" v-if="order_list_mine.length <=0">
      <span>暂无数据...</span>
    </div>
    <div v-else class="position" id="pos" v-for="(item,index) in order_list_mine" :key="index">
      <div class="position_list">
        <div class="list_name">
          <span>合约名称</span>
          <span>{{item.product_name}}</span>
        </div>
        <div class="list_text">
          <div>
            <span>合约代码：</span>
            <span>{{item.product_code}}</span>
          </div>
          <!-- <div>
            <span>开平：</span>
            <span>{{item.ware==1?"开仓":(item.ware==2?"平仓":item.ware==3?"平今":'')}}</span>
          </div> -->
        </div>
        <div class="list_text">
          <div>
            <span>单号：</span>
            <span>{{item.order_no}}</span>
          </div>
          <div>
            <span>买卖：</span>
            <span>{{item.direction==1?'买':'卖'}}</span>
          </div>
        </div>
        <div class="list_text">
          <div>
            <span>成交价：</span>
            <span>{{item.price}}</span>
          </div>
          <div>
            <span>成交手数：</span>
            <span>{{item.hand}}</span>
          </div>
        </div>
        <div class="list_text">
          <div>
            <span>止盈点数：</span>
            <span>{{item.stop_profit}}</span>
          </div>
          <div>
            <span>止损点数：</span>
            <span>{{item.stop_loss}}</span>
          </div>
        </div>
        <div class="list_text">
          <div>
            <span>实时盈亏：</span>
            <span :class="item.profit_all >= 0?'up':'down'">{{item.profit_all}}</span>
          </div>
          <div class>
            <span></span>
            <span>{{item.created_at}}</span>
          </div>
        </div>
      </div>
      <div class="pos_button">
        <button @click="openping(item)">快速平仓</button>
        <button @click="profit(item)">止盈止损</button>
        <button @click="openfan(item)">快速反手</button>
      </div>
    </div>

    <div style="width: 100%;height: 5rem;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order_list_mine: []
    };
  },
  mounted() {
    this.get_order_list_mine();
    this.timer.push("get_order_list_mine", this.get_order_list_mine);
  },
  methods: {
    openping(item) {
      //快速平仓
      this.holdid = item.id;
      if (!this.holdid) {
        return this.$message.error("请选中一笔进行操作！");
      }
      var that = this;
      that
        .$http({
          //调用接口
          method: "POST",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          url: that.$serverUrl + "futures_orders_quick_ping?id=" + that.holdid
        })
        .then(res => {
          if (res.data.msg == "success") {
            that.get_order_list_mine();
            this.$message({
              type: "success",
              message: res.data.data
            });
          } else {
            that.$message.error(res.data.msg);
          }
          this.activeClass1 = "-1";
        });
    },
    openfan(item) {
      //快速反手
      this.holdid = item.id;
      if (!this.holdid) {
        return this.$message.error("请选中一笔进行操作！");
      }
      var that = this;
      that
        .$http({
          //调用接口
          method: "POST",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          url: that.$serverUrl + "futures_orders_quick_back?id=" + that.holdid
        })
        .then(res => {
          if (res.data.msg == "success") {
            that.get_order_list_mine();
            this.$message({
              type: "success",
              message: res.data.data
            });
          } else {
            that.$message.error(res.data.msg);
          }
          this.activeClass1 = "-1";
        });
    },
    get_order_list_mine() {
      var that = this;
      that
        .$http({
          //调用接口
          method: "GET",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          data: that.param,
          url: that.$serverUrl + "futures_orders?state=1"
        })
        .then(res => {
          that.order_list_mine = res.data.data;
          that.holdcode = res.data.data[0] ? res.data.data[0].product_code : "";
        });
    },
    profit(item) {
      this.$router.push({
        path: "profit",
        query: {
          value: item.product_code
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.up {
  color: red !important;
}
.down {
  color: #00b48e !important;
}
.position {
  width: 100%;
  height: 4.5rem;
  background: #f3f3f3;
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  border-bottom: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
}

.position_list {
  width: 75%;
  height: 3.5rem;
}
.list_name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.375rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #26a2ff;
}

.position_list {
  width: 75%;
  height: 100%;
}

.list_name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.375rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #26a2ff;
}

.list_text {
  width: 100%;
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  color: #666;
}

.text_last {
  color: #333;
  margin-top: 0.2rem;
}

.pos_button {
  width: 25%;
  height: 100%;
}

.pos_button {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.pos_button button {
  background: #26a2ff;
  width: 1.8rem;
  height: 0.7rem;
  color: #fff;
  outline: none;
}
.nolist {
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: #666;
  text-align: center;
  margin-top: 2rem;
}
</style>
